<template>
  <div style="background-color:#fff">
    <a-radio-group default-value="a" button-style="solid" style="margin-left: 15px;padding: 10px 0" @change="handlechangeRadio">
      <a-radio-button value="a"> 图表 </a-radio-button>
      <a-radio-button value="b"> 表格 </a-radio-button>
    </a-radio-group>
    <!-- https://antv-g2plot.gitee.io/zh/examples/column/basic#color  基础柱状图 -->
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" style="padding-top:0px" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" style="background-color:#F0F2F5;">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :bordered="false" title="故障" :style="{ height: '100%' }">
            <a-range-picker :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]" @change="gzonchange" class="rangePicker" />
            <!-- //类型区分 -->
            <a-tabs size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }" @change="gzcallback">
              <a-tab-pane tab="专线处理" key="1">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：96/99</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <!-- 统计图 -->
                <div id="zxclChartTime"></div>
              </a-tab-pane>
              <a-tab-pane tab="专线故障" key="2">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：4/6</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <!-- 统计图 -->
                <div id="zxgzChartTime"></div>
              </a-tab-pane>
            </a-tabs>

          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :bordered="false" title="投诉" :style="{ height: '100%' }">
            <!-- //类型区分 -->
            <a-range-picker :default-value="[moment(tsstartTime, dateFormat), moment(tsendTime, dateFormat)]" @change="tsonchange" class="rangePicker" />
            <a-tabs size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }" @change="tscallback">
              <a-tab-pane tab="专线投诉处理" key="1">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：95/98</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <div id="tszxChartTime"></div>
              </a-tab-pane>
              <a-tab-pane tab="企宽投诉处理" key="2">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：95/98</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <div id="tsqkChartTime"></div>
              </a-tab-pane>
            </a-tabs>

          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" style="padding-top:0px" v-show="openingIndexType">
      <a-row :gutter="24" type="flex" style="background-color:#F0F2F5;">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :bordered="false" title="满意度" :style="{ height: '100%' }">
            <!-- //类型区分 -->
            <a-range-picker :default-value="[moment(mydstartTime, dateFormat), moment(mydendTime, dateFormat)]" @change="mydchange" class="rangePicker" />
            <a-tabs size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }" @change="mydcallback">
              <a-tab-pane tab="专线投诉回访" key="1">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：95/98</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <div id="myzxChartTime"></div>
              </a-tab-pane>
              <a-tab-pane tab="企宽投诉回访" key="2">
                <a-row>
                  <a-col :span="12">
                    <div style=";float:left">
                      <div>基准/挑战：95/98</div>
                    </div>
                  </a-col>
                  <a-col :span="2"></a-col>
                  <a-col :span="10">
                    <span class="weidabiao1">未达标</span>
                    <div class="weidabiao1-color"></div>
                    <span class="weidabiao1">挑战</span>
                    <div class="weidabiao2-color"></div>
                    <span class="weidabiao1">基准</span>
                    <div class="weidabiao3-color"></div>
                  </a-col>
                </a-row>
                <div id="myqkChartTime"></div>
              </a-tab-pane>
            </a-tabs>

          </a-card>
        </a-col>
      </a-row>
    </div>
    <!-- 表格 -->
    <div v-show="!openingIndexType">

      <a-tabs tab-position="left" style="margin-top:10px" @change="callBack" :activeKey="activeKey">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="android" />
            故障列表
          </span>
          <!-- 开通表格1 -->
          <a-range-picker @change="onChangePicker" style="margin-left: 15px" :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]" :format="dateFormat" />
          <a-button type="primary" icon="search" style="margin: 0px 0 10px 10px" @click="selectEvent">查询</a-button>
          <a-button type="primary" icon="export" style="margin: 0px 0 10px 10px" @click="daochuEvent">excel导出</a-button>
          <a-table :columns="columnstableBreakDown" :data-source="dataOpen" bordered size="middle" style="width:100%;padding:5px 15px" :pagination="false" :loading="tableLoading" />

        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="android" />
            投诉列表
          </span>
          <a-range-picker @change="onChangePicker" style="margin-left: 15px" :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]" :format="dateFormat" />
          <a-button type="primary" icon="search" style="margin: 0px 0 10px 10px" @click="selectEvent">查询</a-button>
          <a-button type="primary" icon="export" style="margin: 0px 0 10px 10px" @click="daochuEvent">excel导出</a-button>

          <a-table :columns="columnstableBreakDownTS" :data-source="dataOpen" bordered size="middle" style="width:100%;padding:5px 15px" :pagination="false" :loading="tableLoading" />

        </a-tab-pane>
        <a-tab-pane key="3">
          <span slot="tab">
            <a-icon type="android" />
            满意度列表
          </span>
          <a-range-picker @change="onChangePicker" style="margin-left: 15px" :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]" :format="dateFormat" />
          <a-button type="primary" icon="search" style="margin: 0px 0 10px 10px" @click="selectEvent">查询</a-button>
          <a-button type="primary" icon="export" style="margin: 0px 0 10px 10px" @click="daochuEvent">excel导出</a-button>

          <a-table :columns="columnstableBreakDownMYD" :data-source="dataOpen" bordered size="middle" style="width:100%;padding:5px 15px" :pagination="false" :loading="tableLoading" />
        </a-tab-pane>
      </a-tabs>

    </div>
  </div>
</template>

<script>
import { getNowTime, getNowFormatDate, getWeekTime } from '@/utils/util'
import {
  getKK,
  getCK,
  getJS,
  getDDD,
  getAllInfo,
  getEmosTable,
  getComplainTable,
  getStatisFactionTable,
  exportExcelSatisfactionGrid,
  exportExcelemosGrid,
  exportExcelComplainGrid,
  getProblemSecond,
} from '@/api/public'
import moment from 'moment'
import { baseMixin } from '@/store/app-mixin'
import { Column } from '@antv/g2plot'
const DataSet = require('@antv/data-set')
export default {
  name: 'Analysis',
  mixins: [baseMixin],

  data() {
    return {
      activeKey:'1',
      dateFormat: 'YYYY-MM-DD',
      gzselectTime: '', //故障 数组（时间区间）
      tsselectTime: '', //投诉 数组（时间区间）
      mydselectTime: '', //满意度 数组（时间区间）
      tableLoading: false,
      startTime: '', //故障
      endTime: '',
      tsstartTime: '', //投诉
      tsendTime: '',
      mydstartTime: '', //满意度
      mydendTime: '',
      columnstableBreakDown,
      columnstableBreakDownTS,
      columnstableBreakDownMYD,
      dataOpen: [],
      kkdata: [], // 快开回单数据
      ckReceiptdata: [], // 查勘回单数据
      ckReceivedata: [], // 查勘接单数据
      jsReceiptdata: [], // 建设回单数据
      jsReceivedata: [], // 建设接单数据
      openingIndexType: true,
      openingIndexTypeNext: 'guzhang',
      loading: true,
      kktime: 1,
      kkreceive: 1,
      ckreceive: 1,
      ckreceipt: 1,
      jsreceipt: 1,
      jsreceive: 1,
      pagination: false,
      openChartTimePlot: '',
      openChartKkreceivePlot: '',
      surveyReceiptPlot: '',
      surveyReceivePlot: '',
      surveyChartTimePlots: '',
      buildChartReceiptPlot: '',
      buildChartReceivePlot: '',
      buildChartTimePlots: '',
      gztype: 1,
      tstype: 1,
      mydtype: 1,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
    }
  },
  created() {
    //查询接口 处理数据
    this.loading = true
    this.startTime = getNowFormatDate()
    this.endTime = getNowFormatDate()
    this.tsstartTime = getNowFormatDate()
    this.tsendTime = getNowFormatDate()
    this.mydstartTime = getNowFormatDate()
    this.mydendTime = getNowFormatDate()

    this.$nextTick(() => {
      //故障
      let data = []
      this.zxclChartInit(data)
      // this.zxgzChartInit(data)
      //投诉
      this.tszxChartInit(data)
      // this.tsqkChartInit(data)
      //满意度
      this.myzxChartInit(data)
      // this.myqkChartInit(data)
    })

    this.gzselectTime = [moment(this.startTime), moment(this.endTime)]
    this.tsselectTime = [moment(this.tsstartTime), moment(this.tsendTime)]
    this.mydselectTime = [moment(this.mydstartTime), moment(this.mydendTime)]
  },
  mounted() {
    this.getguzhangInfo()
  },
  methods: {
    moment,
    //首页数据获取
    getguzhangInfo() {
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      getProblemSecond(startTime, endTime)
        .then((response) => {
          let first = response.data
          first.forEach((item, index) => {
            first[index].type = first[index].area
            //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
            first[index].specialLine = Math.abs(this.toPoint(first[index].specialLine) * 100)
            first[index].lineFault = Math.abs(this.toPoint(first[index].lineFault) * 100)
            first[index].zxSatisfied = Math.abs(this.toPoint(first[index].zxSatisfied) * 100)
            first[index].qkSatisfied = Math.abs(this.toPoint(first[index].qkSatisfied) * 100)
            first[index].zxComplain = Math.abs(this.toPoint(first[index].zxComplain) * 100)
            first[index].qkComplain = Math.abs(this.toPoint(first[index].qkComplain) * 100)
          })
          this.openChartTimePlot.changeData(first)
          this.surveyChartTimePlots.changeData(first)
          this.buildChartTimePlots.changeData(first)
        })
        .catch((error) => {})
    },

    //故障 -图表 -专线处理及时率
    zxclChartInit(openData) {
      this.openChartTimePlot = new Column(document.getElementById('zxclChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'specialLine',
        label: {},
        colorField: 'specialLine',
        color: (d) => {
          if (d < 96) {
            return '#E5703E'
          } else if (d >= 96 && d < 99) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: ' ',
          },
          specialLine: {
            alias: '及时率',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })

      this.openChartTimePlot.render()
    },
    //故障- 专线故障率
    zxgzChartInit(openData) {
      this.openChartKkreceivePlot = new Column(document.getElementById('zxgzChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'lineFault',
        label: {},
        colorField: 'lineFault',
        color: (d) => {
          if (d < 4) {
            return '#E5703E'
          } else if (d >= 4 && d < 6) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: ' ',
          },
          lineFault: {
            alias: '故障率',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.openChartKkreceivePlot.render()
    },
    //投诉 专线及时率
    tszxChartInit(openData) {
      this.surveyChartTimePlots = new Column(document.getElementById('tszxChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'zxComplain',
        label: {},
        colorField: 'zxComplain',
        color: (d) => {
          if (d < 95) {
            return '#E5703E'
          } else if (d >= 95 && d < 98) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: ' ',
          },
          zxComplain: {
            alias: '故障率',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.surveyChartTimePlots.render()
    },
    //投诉 企宽及时率
    tsqkChartInit(openData) {
      this.surveyReceivePlot = new Column(document.getElementById('tsqkChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'qkComplain',
        label: {},
        colorField: 'qkComplain',
        color: (d) => {
          if (d < 95) {
            return '#E5703E'
          } else if (d >= 95 && d < 98) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: ' ',
          },
          qkComplain: {
            alias: '及时率',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.surveyReceivePlot.render()
    },

    //满意度  专线
    myzxChartInit(openData) {
      this.buildChartTimePlots = new Column(document.getElementById('myzxChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'zxSatisfied',
        label: {},
        colorField: 'zxSatisfied',
        color: (d) => {
          if (d < 95) {
            return '#E5703E'
          } else if (d >= 95 && d < 98) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: ' ',
          },
          zxSatisfied: {
            alias: '满意度',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.buildChartTimePlots.render()
    },
    //满意度  企宽
    myqkChartInit(openData) {
      this.buildChartReceivePlot = new Column(document.getElementById('myqkChartTime'), {
        data: openData,
        xField: 'type',
        yField: 'qkSatisfied',
        label: {},
        colorField: 'qkSatisfied',
        color: (d) => {
          if (d < 95) {
            return '#E5703E'
          } else if (d >= 95 && d < 98) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          type: {
            alias: ' ',
          },
          qkSatisfied: {
            alias: '满意度',
          },
        },
        events: {
          onColumnClick: (e) => {
            // let infoData = {}
            // infoData.area = e.data.area
            // this.infoData = infoData
            // this.kkShow = true
          },
        },
      })
      this.buildChartReceivePlot.render()
    },
    //图的数据
    getAllChartInfo() {
      this.loading = true
      setTimeout(() => {
        this.getguzhangInfo()
        this.gettousuInfo() //
        this.getmanyiduInfo() //满意度
        this.loading = false
      }, 1000)
    },
    //投诉 this.surveyChartTimePlots.changeData(first) this.surveyReceivePlot.changeData(first)
    tscallback(key) {
      this.tstype = key
      if (key == 1) {
        if (this.surveyChartTimePlots.length == undefined) {
          this.surveyChartTimePlots.destroy()
        }
        let startTime = this.tsstartTime + ' 00:00:00'
        let endTime = this.tsendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxComplain = Math.abs(this.toPoint(first[index].zxComplain) * 100)
              first[index].qkComplain = Math.abs(this.toPoint(first[index].qkComplain) * 100)
            })
            this.tszxChartInit(first)
          })
          .catch((error) => {})
      } else {
        if (this.surveyReceivePlot.length == undefined) {
          this.surveyReceivePlot.destroy()
        }
        let startTime = this.tsstartTime + ' 00:00:00'
        let endTime = this.tsendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxComplain = Math.abs(this.toPoint(first[index].zxComplain) * 100)
              first[index].qkComplain = Math.abs(this.toPoint(first[index].qkComplain) * 100)
            })
            this.tsqkChartInit(first)
          })
          .catch((error) => {})
      }
    },
    //故障this.openChartTimePlot.changeData(first) this.openChartKkreceivePlot.changeData(first)
    gzcallback(key) {
      this.gztype = key
      if (key == 1) {
        if (this.openChartTimePlot.length == undefined) {
          this.openChartTimePlot.destroy()
        }
        let startTime = this.startTime + ' 00:00:00'
        let endTime = this.endTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].specialLine = Math.abs(this.toPoint(first[index].specialLine) * 100)
              first[index].lineFault = Math.abs(this.toPoint(first[index].lineFault) * 100)
            })
            this.zxclChartInit(first)
          })
          .catch((error) => {})
      } else if (key == 2) {
        if (this.openChartKkreceivePlot.length == undefined) {
          this.openChartKkreceivePlot.destroy()
        }
        let startTime = this.startTime + ' 00:00:00'
        let endTime = this.endTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].specialLine = Math.abs(this.toPoint(first[index].specialLine) * 100)
              first[index].lineFault = Math.abs(this.toPoint(first[index].lineFault) * 100)
            })
            this.zxgzChartInit(first)
          })
          .catch((error) => {})
      }
    },
    //满意度
    mydcallback(key) {
      this.mydtype = key
      if (key == 1) {
        if (this.buildChartTimePlots.length == undefined) {
          this.buildChartTimePlots.destroy()
        }
        let startTime = this.mydstartTime + ' 00:00:00'
        let endTime = this.mydendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxSatisfied = Math.abs(this.toPoint(first[index].zxSatisfied) * 100)
              first[index].qkSatisfied = Math.abs(this.toPoint(first[index].qkSatisfied) * 100)
            })
            this.myzxChartInit(first)
          })
          .catch((error) => {})
      } else {
        if (this.buildChartReceivePlot.length == undefined) {
          this.buildChartReceivePlot.destroy()
        }
        let startTime = this.mydstartTime + ' 00:00:00'
        let endTime = this.mydendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxSatisfied = Math.abs(this.toPoint(first[index].zxSatisfied) * 100)
              first[index].qkSatisfied = Math.abs(this.toPoint(first[index].qkSatisfied) * 100)
            })
            this.myqkChartInit(first)
          })
          .catch((error) => {})
      }
    },
    //时间选择
    gzonchange(dates, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1]
      if (this.gztype == 1) {
        if (this.openChartTimePlot.length == undefined) {
          this.openChartTimePlot.destroy()
        }
        let startTime = this.startTime + ' 00:00:00'
        let endTime = this.endTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].specialLine = Math.abs(this.toPoint(first[index].specialLine) * 100)
              first[index].lineFault = Math.abs(this.toPoint(first[index].lineFault) * 100)
            })
            this.zxclChartInit(first)
          })
          .catch((error) => {})
      } else {
        if (this.openChartKkreceivePlot.length == undefined) {
          this.openChartKkreceivePlot.destroy()
        }
        let startTime = this.startTime + ' 00:00:00'
        let endTime = this.endTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].specialLine = Math.abs(this.toPoint(first[index].specialLine) * 100)
              first[index].lineFault = Math.abs(this.toPoint(first[index].lineFault) * 100)
            })
            this.zxgzChartInit(first)
          })
          .catch((error) => {})
      }
    },
    tsonchange(dates, dateString) {
      this.tsstartTime = dateString[0]
      this.tsendTime = dateString[1]
      if (this.tstype == 1) {
        if (this.surveyChartTimePlots.length == undefined) {
          this.surveyChartTimePlots.destroy()
        }
        let startTime = this.tsstartTime + ' 00:00:00'
        let endTime = this.tsendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxComplain = Math.abs(this.toPoint(first[index].zxComplain) * 100)
              first[index].qkComplain = Math.abs(this.toPoint(first[index].qkComplain) * 100)
            })
            this.tszxChartInit(first)
          })
          .catch((error) => {})
      } else {
        if (this.surveyReceivePlot.length == undefined) {
          this.surveyReceivePlot.destroy()
        }
        let startTime = this.tsstartTime + ' 00:00:00'
        let endTime = this.tsendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxComplain = Math.abs(this.toPoint(first[index].zxComplain) * 100)
              first[index].qkComplain = Math.abs(this.toPoint(first[index].qkComplain) * 100)
            })
            this.tsqkChartInit(first)
          })
          .catch((error) => {})
      }
    },
    mydchange(dates, dateString) {
      this.mydstartTime = dateString[0]
      this.mydendTime = dateString[1]
      if (this.mydtype == 1) {
        if (this.buildChartTimePlots.length == undefined) {
          this.buildChartTimePlots.destroy()
        }
        let startTime = this.mydstartTime + ' 00:00:00'
        let endTime = this.mydendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxSatisfied = Math.abs(this.toPoint(first[index].zxSatisfied) * 100)
              first[index].qkSatisfied = Math.abs(this.toPoint(first[index].qkSatisfied) * 100)
            })
            this.myzxChartInit(first)
          })
          .catch((error) => {})
      } else {
        if (this.buildChartReceivePlot.length == undefined) {
          this.buildChartReceivePlot.destroy()
        }
        let startTime = this.mydstartTime + ' 00:00:00'
        let endTime = this.mydendTime + ' 23:59:59'
        getProblemSecond(startTime, endTime)
          .then((response) => {
            let first = response.data
            first.forEach((item, index) => {
              first[index].type = first[index].area
              //故障及时率 专线故障率 投诉及时率 投诉企宽及时率  专线回访满意度  企宽回访满意度
              first[index].zxSatisfied = Math.abs(this.toPoint(first[index].zxSatisfied) * 100)
              first[index].qkSatisfied = Math.abs(this.toPoint(first[index].qkSatisfied) * 100)
            })
            this.myqkChartInit(first)
          })
          .catch((error) => {})
      }
    },
  
    /***
     * 表格数据操作
     */
    //时间的切换
    onChangePicker(date, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1]
    },
    //图-表切换
    handlechangeRadio(e) {
      e.target.value == 'a' ? this.getAllChartInfo() : (this.activeKey="1",this.getGuzhangTableInfo())
      this.openingIndexType = !this.openingIndexType
    },
    // 故障表格
    getGuzhangTableInfo() {
      this.tableLoading = true
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      getEmosTable(startTime, endTime).then((response) => {
        let first = response.data
        this.dataOpen = first
        this.tableLoading = false
      })
    },
    //投诉表格
    gettousuTableInfo() {
      this.tableLoading = true
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      getComplainTable(startTime, endTime).then((response) => {
        let first = response.data
        this.dataOpen = first
        this.tableLoading = false
      })
    },
    //满意度表格
    getmanyiduTableInfo() {
      this.tableLoading = true
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      getStatisFactionTable(startTime, endTime).then((response) => {
        let first = response.data
        this.dataOpen = first
        this.tableLoading = false
      })
    },
    //查询
    selectEvent() {
      switch (this.openingIndexTypeNext) {
        case '1':
          this.getGuzhangTableInfo()
          break
        case '2':
          this.gettousuTableInfo()
          break
        case '3':
          this.getmanyiduTableInfo()
          break
        default:
      }
    },
    //数据导出
    daochuEvent() {
      switch (this.openingIndexTypeNext) {
        case '1':
          this.downloadGz()
          break
        case '2':
          this.downloadTs()
          break
        case '3':
          this.downloadMyd()
          break
        default:
      }
    },
    //数据切换  列表
    callBack(key) {
      this.openingIndexTypeNext = key
      switch (key) {
        case '1':
          this.activeKey="1"
          this.getGuzhangTableInfo()
          break
        case '2':
          this.activeKey="2"
          this.gettousuTableInfo()
          break
        case '3':
          this.activeKey="3"
          this.getmanyiduTableInfo()
          break
        default:
      }
    },
    //故障导出
    downloadGz() {
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      exportExcelemosGrid(startTime, endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '故障表格.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //投诉导出
    downloadTs() {
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      exportExcelComplainGrid(startTime, endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '投诉.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //满意度导出
    downloadMyd() {
      let startTime = this.startTime + ' 00:00:00'
      let endTime = this.endTime + ' 23:59:59'
      exportExcelSatisfactionGrid(startTime, endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '满意度.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    },
    //转百分数
    toPercent(point) {
      var str = Number(point * 100).toFixed(1)
      str += '%'
      return str
    },
  },
}

//故障
const columnstableBreakDown = [
  {
    title: '区县',
    dataIndex: 'area',
    width: 100,
    align: 'center',
  },
  {
    title: '专线处理及时率',
    children: [
      {
        title: '工单量',
        dataIndex: 'specialLineNum',
        width: 100,
        align: 'center',
      },
      {
        title: '超时工单',
        dataIndex: 'specialLineOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '及时率',
        dataIndex: 'specialLine',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '重要专线处理及时率',
    children: [
      {
        title: '工单量',
        dataIndex: 'majorSpecialLineNum',
        width: 100,
        align: 'center',
      },
      {
        title: '超时工单',
        dataIndex: 'majorSpecialLineOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '及时率',
        dataIndex: 'majorSpecialLine',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '专线故障率',
    children: [
      {
        title: '专线数',
        dataIndex: 'lineFaultNum',
        width: 100,
        align: 'center',
      },
      {
        title: '影响专线数',
        dataIndex: 'lineFaultOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '专线故障率',
        dataIndex: 'lineFault',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '重要专线可用率',
    children: [
      {
        title: '建档专线数',
        dataIndex: 'majorLineFaultNum',
        width: 100,
        align: 'center',
      },
      {
        title: '故障总历时',
        dataIndex: 'majorLineFaultOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '可用率',
        dataIndex: 'majorLineFault',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '重复故障率',
    children: [
      {
        title: '故障专线数',
        dataIndex: 'repeatNum',
        width: 100,
        align: 'center',
      },
      {
        title: '去重故障专线数',
        dataIndex: 'repeatOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '故障率',
        dataIndex: 'repeat',
        width: 100,
        align: 'center',
      },
    ],
  },
]

//投诉
const columnstableBreakDownTS = [
  {
    title: '区县',
    dataIndex: 'area',

    width: 100,
    align: 'center',
  },
  {
    title: '政企投诉处理及时率',
    children: [
      {
        title: '工单量',
        dataIndex: 'zqNum',
        width: 100,
        align: 'center',
      },
      {
        title: '超时工单',
        dataIndex: 'zqOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '及时率',
        dataIndex: 'zq',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '企宽投诉处理及时率',
    children: [
      {
        title: '工单量',
        dataIndex: 'qkNum',
        width: 100,
        align: 'center',
      },
      {
        title: '超时工单',
        dataIndex: 'qkOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '及时率',
        dataIndex: 'qk',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '专线投诉处理及时率',
    children: [
      {
        title: '工单量',
        dataIndex: 'zxNum',
        width: 100,
        align: 'center',
      },
      {
        title: '超时工单',
        dataIndex: 'zxOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '及时率',
        dataIndex: 'zx',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '绿通投诉处理及时率',
    children: [
      {
        title: '工单量',
        dataIndex: 'ltNum',
        width: 100,
        align: 'center',
      },
      {
        title: '超时工单',
        dataIndex: 'ltOverNum',
        width: 100,
        align: 'center',
      },
      {
        title: '及时率',
        dataIndex: 'lt',
        width: 100,
        align: 'center',
      },
    ],
  },

  {
    title: '万投比',
    children: [
      {
        title: '专线量',
        dataIndex: 'wtzxNum',
        width: 100,
        align: 'center',
      },
      {
        title: '企宽量',
        dataIndex: 'wtqkNum',
        width: 100,
        align: 'center',
      },
      {
        title: '专线万投比',
        dataIndex: 'wtzxRatio',
        width: 100,
        align: 'center',
      },
      {
        title: '企宽万投比',
        dataIndex: 'wtqkRatio',
        width: 100,
        align: 'center',
      },
      {
        title: '政企万投比',
        dataIndex: 'wtzqRatio',
        width: 100,
        align: 'center',
      },
      // /
    ],
  },
]

//满意度
const columnstableBreakDownMYD = [
  {
    title: '区县',
    dataIndex: 'area',
    width: 100,
    align: 'center',
  },
  {
    title: '政企投诉回访满意度',
    children: [
      {
        title: '总量',
        dataIndex: 'zqNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意度',
        dataIndex: 'zqSatisfaction',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '企宽投诉回访满意度',
    children: [
      {
        title: '回访总量',
        dataIndex: 'qkNum',
        width: 100,
        align: 'center',
      },
      {
        title: '不满意量',
        dataIndex: 'qkDissatisfied',
        width: 100,
        align: 'center',
      },
      {
        title: '不确定量',
        dataIndex: 'qkDisSureNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意量',
        dataIndex: 'qkSatisfiedNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意度',
        dataIndex: 'qkSatisfied',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '专线投诉回访满意度',
    children: [
      {
        title: '回访总量',
        dataIndex: 'zxNum',
        width: 100,
        align: 'center',
      },
      {
        title: '不满意量',
        dataIndex: 'zxDissatisfied',
        width: 100,
        align: 'center',
      },
      {
        title: '不确定量',
        dataIndex: 'zxDisSureNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意量',
        dataIndex: 'zxSatisfiedNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意度',
        dataIndex: 'zxSatisfied',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '绿通投诉回访满意度',
    children: [
      {
        title: '回访量',
        dataIndex: 'ltNum',
        width: 100,
        align: 'center',
      },
      {
        title: '不满意量',
        dataIndex: 'ltDissatisfied',
        width: 100,
        align: 'center',
      },
      {
        title: '不确定量',
        dataIndex: 'ltDisSureNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意量',
        dataIndex: 'ltSatisfiedNum',
        width: 100,
        align: 'center',
      },
      {
        title: '满意度',
        dataIndex: 'ltSatisfied',
        width: 100,
        align: 'center',
      },
    ],
  },
]
</script>

<style lang="less" scoped>
.weidabiao1 {
  float: right;
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  // padding-top: 1px;
}

.weidabiao1-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5dce3c;
  float: right;
}
.weidabiao2-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #e5703e;
  float: right;
}
.weidabiao3-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5687f4;
  float: right;
}

//......................................................
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.fk1 {
  width: 12px;
  height: 12px;
  background: rgba(255, 188, 29, 1);
  opacity: 1;
  border-radius: 2px;
}
.fkcompany {
  margin-left: 2px;
  margin-top: -3px;
  font-size: 12px;
  font-weight: 500;
  color: #3e3e3e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rangePicker {
  width: 300px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}
</style>
